<template>
	<view class="">
		<u-navbar titleStyle="font-size:40rpx;color:#333;font-weight:700" :placeholder='true' title="天天特卖"
			:autoBack="true" bgColor="#f5f5f5"></u-navbar>
		
		
		<div v-if="swiperList.length>0" class='paddingLR32'>
			 <u-swiper :list="swiperList" height='220rpx' radius="10rpx" keyName='image'></u-swiper>
		</div>
		   
		<!-- 惊喜价 -->
		<view class="mt24 mb24 bgf  onsaleBox" >
			<view class="flexJBC">
				<view class="flex leftBox" style="align-items: flex-end;">
					<view class="fontS32 homeRed fw8">
						惊喜价
					</view>
					<view class="fontS24 co9 paddingLR24" style="color: #C89C7B;">
						抢到就是赚到！
					</view>
				</view>
				<view class="flex co6 fengq fontS24">
					<image src="/static/images/index/Vector.png" mode=""
						style="width: 24rpx;height: 32rpx;margin-right: 10rpx;"></image>
					{{platform}}人疯抢中
				</view>
			</view>
			<view class="mt24 paddingLR32">
				<scroll-view scroll-x="true" @scrolltolower='getTopList(true)'>
					<view class="flex" style="flex-wrap: nowrap;">
						<view class="" v-for="(item,index) in topList" :key="index" style="margin:0rpx 12rpx 20rpx 0rpx;" @click="$my.go('/myPackageA/goodsAndFacton/goodsDetails?id='+item.id)">
							<image :src="item.image"  style="width: 160rpx;height: 160rpx;border-radius: 10rpx;margin-bottom: 16rpx;"></image>
							  
							<view class="flexJBC flexRowCenter">
								<view class="relative" >
									<image src="/static/images/index/Vector.png" mode=""
										style="width: 30rpx;height: 40rpx;margin-right: 10rpx;"></image>
									<view class="cof fontS18 absolute"
										style="top:50%;left: 40%;transform: translate(-50%,-50%);">
										抢
									</view>
								</view>
								<view class="homeRed ">
									<text class="fontS20">￥</text>
									<text class="fw7">{{item.price }}</text>
								</view> 
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- 分类 -->
		<view class="lisBox" >
			<u-tabs  :list="tabs" @click="getList" :activeStyle="{color:$store.state.homeRed }" keyName='cate_name'
				:itemStyle="{color: '#999', fontSize:'32rpx',lineHeight:'80rpx',}" :lineColor="$store.state.homeRed">
			</u-tabs>
			<view class="padding32">
				<List :showTopTitle='false'  :list="list" v-if="list.length>0" :showwant='false'/> 
			</view> 
		</view>
		<u-empty width='162px' height="140px" :show='list.length==0' style="marginTop:20vh"></u-empty>
	</view> 
</template>

<script>
	import List from '@/componentes/list.vue'
	export default {
		components:{
			List
		},
		data() {
			return {
				swiperList:[],
				page:1,
				topPage:1,
				platform:0, //多少人疯抢
				topList:[], //惊喜价列表
				list:[],
				id:1, //分类id
				search: "",
				tabs: [],
			}
		},
		onReachBottom() {
			this.page++;
			this.getList()
		},
		methods:{
			getSwiper(){
				this.$my.post('/index/com/getAd',{type:0,type_id:this.id}).then(res=>{
					 if(res.code==200){
						 this.swiperList=res.data
					 }
				})
			},
			getTopList(val){
				if(val){
					this.topPage++;
				}
				this.$my.post('/index/Product/getProductLowPrice',{page:this.topPage,limit:10,platform_type_id:this.id}).then(res=>{
					 if(res.code==200){
						 this.platform=res.data.number
						 if(res.data.data.length>0){
							 this.topList= this.topList.concat(res.data.data)
						 }
					 }
				})
			},
			getList(val){
				if(val){
					this.page=1;
					this.list=[];
				}
				this.$my.post('/index/Product/getPlatformTypeProductDay',{page:this.page,limit:10,platform_type_id:this.id,category_id:val?this.tabs[val.index].store_category_id:this.tabs[0].store_category_id,search_key:this.search}).then(res=>{
					if(res.code==200 && res.data.data.length>0){
						this.list=this.list.concat(res.data.data)
					}
				}) 
			},
			getTabs(){ 
				this.$my.post('/index/Product/getPlatFormTypeProductType',{platform_type_id:this.id}).then(res=>{
					 if(res.code==200){
						this.tabs=res.data
						this.getList()
					 }
				})
			}
		},
		onLoad(option) {
			this.id=option.id?option.id:1
			this.getTopList()// 惊喜价列表
			this.getTabs()//获取分类
			this.getSwiper()//
		},
	}
</script>

<style lang="scss" scoped>
	.onsaleBox{
		.leftBox{
			padding:0 24rpx;
			height: 76rpx; 
			line-height: 76rpx;
			background: linear-gradient(93.73deg, #FDEACF 0%, #FFE3CB 104.08%);
			border-radius:20rpx 0px 34rpx;
		}
		margin: 16px;border-radius: 10px;
		background: linear-gradient(180deg, #FFF3E7 0%, #FFFFFF 100%);
	}
	.lisRight{
		height: 210rpx;
		flex: 1;
		margin-left: 24rpx;
		display: flex;
		justify-content: space-between;
		flex-direction: column;
	}
	.whiteBox{
		margin-top: 16rpx;
	}
	.lisBox{
		width: 100%;
		background-color: #fff;
		border-radius: 40rpx 40rpx 0 0;
		
		background: linear-gradient(#fff 0.5%, #f5f5f5 100%);
	}
	.fengq {
		border: 2rpx solid #F5F5F5;
		border-radius: 24rpx;
		height: 48rpx;
		line-height: 48rpx;
		padding: 0 16rpx;
	}

	.inputBox {
		background-color: #fff;
		padding: 0rpx 32rpx 32rpx;
		box-sizing: border-box;
	}
</style>
